<!--
 * @Author: whr2349 378237242@qq.com
 * @Date: 2025-08-14 13:51:26
 * @LastEditors: whr2349 378237242@qq.com
 * @LastEditTime: 2025-08-15 11:11:43
 * @FilePath: \taluo\src\pages\taluo\draw.vue
 * @Description: 抽牌页面
 * 步骤1 选择排阵
 * 步骤2 抽牌
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved.
-->
<!-- 抽牌页面 -->
<template>
  <div class="bg-gradient-to-br from-purple-50 to-indigo-100 h-full p-2">
    <el-card class="shadow-lg overflow-hidden w-full h-full">
      <template #header>
        <div class="text-center">
          <h1 class="text-3xl font-bold text-purple-800">塔罗牌抽牌</h1>
          <p class="text-gray-600 mt-1">探索你内心的智慧与直觉</p>
        </div>
      </template>
      <div class="cbody overflow-y-auto max-h-[calc(100vh-240px)] pb-8">
        <!-- 步骤指示器 -->
        <el-steps :active="currentStep - 1" class="" align-center>
          <el-step title="选择牌阵"></el-step>
          <el-step title="洗牌"></el-step>
          <el-step title="查看结果"></el-step>
        </el-steps>

        <!-- 步骤1: 选择牌阵 -->
        <div v-if="currentStep === 1" class="py-4">
          <h2 class="text-2xl font-semibold text-center text-purple-700 mb-6">请选择牌阵</h2>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <el-card
              @click="selectSpread(1)"
              class="cursor-pointer hover:shadow-xl transition-all duration-300 bg-white border-purple-200"
            >
              <template #header>
                <div class="text-center">
                  <h3 class="text-xl font-bold text-purple-700">单牌阵</h3>
                </div>
              </template>
              <div class="text-center py-4">
                <div
                  class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4"
                >
                  <span class="text-2xl font-bold text-purple-600">1</span>
                </div>
                <p class="text-gray-600">抽取1张牌，用于快速解答简单问题</p>
              </div>
            </el-card>

            <el-card
              @click="selectSpread(3)"
              class="cursor-pointer hover:shadow-xl transition-all duration-300 bg-white border-purple-200"
            >
              <template #header>
                <div class="text-center">
                  <h3 class="text-xl font-bold text-purple-700">三牌阵</h3>
                </div>
              </template>
              <div class="text-center py-4">
                <div
                  class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4"
                >
                  <span class="text-2xl font-bold text-purple-600">3</span>
                </div>
                <p class="text-gray-600">过去、现在、未来的发展趋势</p>
              </div>
            </el-card>

            <el-card
              @click="selectSpread(5)"
              class="cursor-pointer hover:shadow-xl transition-all duration-300 bg-white border-purple-200"
            >
              <template #header>
                <div class="text-center">
                  <h3 class="text-xl font-bold text-purple-700">五牌阵</h3>
                </div>
              </template>
              <div class="text-center py-4">
                <div
                  class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4"
                >
                  <span class="text-2xl font-bold text-purple-600">5</span>
                </div>
                <p class="text-gray-600">更全面的分析，包括问题根源、现状、挑战、建议和结果</p>
              </div>
            </el-card>
          </div>
        </div>

        <!-- 步骤2: 洗牌 -->
        <div v-if="currentStep === 2" class="py-4 text-center">
          <h2 class="text-2xl font-semibold text-purple-700 mb-6">正在洗牌...</h2>
          <div
            class="relative h-80 md:h-96 flex items-center justify-center overflow-hidden bg-gradient-to-r from-purple-50 to-indigo-50 rounded-lg mb-8"
          >
            <div
              v-for="(card, index) in 78"
              :key="index"
              class="absolute"
              :style="{
                transform: `translate(${Math.random() * 300 - 150}px, ${Math.random() * 200 - 100}px) rotate(${Math.random() * 360}deg)`,
                transition: 'all 0.5s ease',
              }"
            >
              <el-card
                :body-style="{ padding: '0', width: '100px', height: '150px', overflow: 'hidden' }"
                class="shadow-md"
              >
                <img
                  :src="`/imgs/78/beimian.png`"
                  alt="塔罗牌"
                  class="w-full h-full object-cover rounded-lg"
                />
              </el-card>
            </div>
            <div class="absolute inset-0 bg-white opacity-20"></div>
          </div>
          <el-button
            type="primary"
            size="large"
            @click="drawCards"
            class="bg-purple-600 hover:bg-purple-700 transition-all duration-300 px-8 py-2 rounded-full shadow-lg"
          >
            <span>抽牌</span>
          </el-button>
        </div>

        <!-- 步骤3: 抽牌结果 -->
        <div v-if="currentStep === 3" class="py-4">
          <h2 class="text-2xl font-semibold text-center text-purple-700 mb-8">抽牌结果</h2>
          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 justify-items-center">
            <div v-for="(card, index) in drawnCards" :key="index" class="w-full max-w-xs">
              <el-card
                class="h-full shadow-lg border-purple-100 bg-white overflow-hidden rounded-lg"
              >
                <div class="relative overflow-hidden" style="height: 300px">
                  <img
                    :src="`/imgs/78/${card.img}`"
                    alt="${card.name}"
                    class="w-full h-full object-contain bg-white rounded-lg"
                    :class="{
                      'transform rotate-180 transition-transform duration-1000': card.reversed,
                    }"
                  />
                </div>
                <div class="p-2 text-center">
                  <div class="text-xl font-bold text-purple-700 mb-2">
                    {{ card.name }}
                    <span class="text-sm font-medium text-purple-700 shadow-sm">
                      {{ card.reversed ? '逆位' : '正位' }}
                    </span>
                  </div>

                  <div class="bg-purple-50 p-3 rounded-lg shadow-inner">
                    <p class="text-gray-700 font-medium mb-2 text-sm">
                      基础含义：{{ card.baseDesc }}
                    </p>
                    <p class="text-gray-700 italic">
                      {{ card.reversed ? '逆位:' : '正位:'
                      }}{{ card.reversed ? card.reversedMeaning : card.uprightMeaning }}
                    </p>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
          <div class="text-center mt-12">
            <el-button
              type="primary"
              size="large"
              @click="restart"
              class="bg-indigo-600 hover:bg-indigo-700 transition-all duration-300 px-8 py-2 rounded-full shadow-lg"
            >
              <span>重新抽牌</span>
            </el-button>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import TAROT from '@/assets/data/TAROT.js'
import { ElCard, ElSteps, ElStep, ElButton } from 'element-plus'

// 塔罗牌含义字典
// 不再需要cardMeanings对象，直接使用TAROT.js中的字段

// 状态管理
const currentStep = ref(1)
const spreadCount = ref(3)
const shuffledCards = ref([])
const drawnCards = ref([])

// 初始化
onMounted(() => {
  // 初始化牌组
  resetDeck()
})

// 选择牌阵
function selectSpread(count) {
  spreadCount.value = count
  currentStep.value = 2
  // 开始洗牌动画
  shuffleDeck()
}

// 重置牌组
function resetDeck() {
  shuffledCards.value = [...TAROT]
}

// 洗牌
function shuffleDeck() {
  // 洗牌动画效果（仅UI展示，不实际打乱牌组）
  const interval = setInterval(() => {
    // 仅更新UI动画，不改变实际牌组顺序
  }, 100)

  // 3秒后停止洗牌
  setTimeout(() => {
    clearInterval(interval)
  }, 3000)
}

// 抽牌
function drawCards() {
  drawnCards.value = []

  // 随机抽取指定数量的牌
  const tempDeck = [...TAROT] // 复制原始牌组
  for (let i = 0; i < spreadCount.value; i++) {
    // 随机生成索引
    const randomIndex = Math.floor(Math.random() * tempDeck.length)
    // 获取随机牌
    const card = tempDeck.splice(randomIndex, 1)[0]
    // 50% 的概率逆位
    card.reversed = Math.random() > 0.5
    drawnCards.value.push(card)
  }

  currentStep.value = 3
}

// 已删除getCardMeaning函数，直接在模板中使用TAROT字段

// 重新抽牌
function restart() {
  currentStep.value = 1
  resetDeck()
  drawnCards.value = []
}
</script>

<style lang="scss" scoped>
// 自定义样式补充
.el-step.is-finish .el-step__icon-inner {
  background-color: #9333ea !important;
}

.el-step.is-active .el-step__icon-inner {
  background-color: #7c3aed !important;
}

.el-step__title {
  color: #6b7280 !important;
}

.el-step.is-finish .el-step__title,
.el-step.is-active .el-step__title {
  color: #7c3aed !important;
  font-weight: 600 !important;
}

// 洗牌动画增强
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

.cbody .el-card:hover {
  animation: float 0.5s ease-in-out;
}

// 牌阵选择卡片悬停效果
.cursor-pointer.el-card:hover {
  transform: translateY(-5px) !important;
}
</style>
